<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>问卷中心</title>

    <!-- Bootstrap core CSS -->
    <link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="<%=request.getContextPath() %>/static/css/summernote.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
    <![endif]-->
    
    <script src="<%=request.getContextPath() %>/static/js/jquery.min.js" ></script>
    <script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath() %>/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
  </head>

  <body>
  <jsp:include page="../Common/navHeader.jsp"></jsp:include>
  <div class="container">
  
  	<br/><br/><br/>
	<h1 style="font-family:华文行楷;" >好室友<small>网</small> </h1>
    <div class="row">
    	
		<div class="col-sm-3">
		</div>
		<div class="col-sm-6">
			<jsp:include page="navHeader.jsp"></jsp:include>
			<br/><br/>
			<%request.setAttribute("tag", "addquestion"); %>
	      	<c:if test="${tag eq 'addquestion' }">
	      	<c:if test="${questionnaireid eq 0 }">
	      		<div class="alert alert-warning" role="alert" id="alert-warning">
	      			未创建问卷，请先去创建问卷……
	      		</div>
	      	</c:if>
	      	<c:if test="${questionnaireid ne 0 }">
	      	<form id="addquestionForm" class="form-horizontal" method="post" action="">
	      	<div class="row">
	      		<div class="row">
	      		<div class="col-xs-4">
		      		<div class="has-success">
			      		<select class="form-control" id="selectQuestionType" name="questionnairetype">
			      		  <option value="0" selected>请选择题目类型</option>
			      		  <option value="1">选择题</option>
			      		  <option value="2">问答题</option>
			      		</select>
					</div>
				</div>
	      		<div class="col-xs-8"></div>
	      		</div>
	      		<div class="row">
	      		
	      		<div id="divQuestionAera">
	      			
	      		</div>
	      		</div>
	      	</div>
	      	
	      	
	      		<script>
	      		window.charList = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	      		
	      		$(document).ready(function() {
	      			
	      			$("#selectQuestionType").change(function() {
	      				$("#divQuestionAera").empty();
	      				switch (+$(this).val()) {
	      				case 1:
	      					createMultipleChoiceQuestion();
	      					break;
	      				case 2:
	      					createEssayQuestion();
	      					break;
	      				}
	      				
	      			});
	      		});
	      		
	      		function createOptionCountField($target) {
	      			$("<input>")
	      			.attr("type", "hidden")
	      			.attr("name", "optionCount")
	      			.attr("id", "fieldOptionCount")
	      			.val(0)
	      			.appendTo($target);
	      		}
	      		function getOptionCount() {
	      			return +$("#fieldOptionCount").val();
	      		}
	      		function setOptionCount(count) {
	      			$("#fieldOptionCount").val(count);
	      		}
	      		
	      		function createQuestionContent($target) {
	      			$target.append(
	      				$("<div>")
	      				.css("margin-left","15px")
	      				.css("margin-right","15px")
	      				.addClass("has-success")
	      				.append(
	      					$("<label>")
	      					.addClass("control-label")
	      					.attr("for", "questionContent")
	      					.text("请输入题目名：")
	      				)
	      				.append(
	      					$("<input>")
	      					.attr("type", "text")
	      					.attr("id", "questionContent")
	      					.attr("name", "questionContent")
	      					.addClass("form-control")
	      				)
	      			);
	      		}
	      		
	      		function createOptionItem($target, currentCount) {
	      			$target
	      			.append(
	      				$("<div>")
	      				.addClass("input-group")
	      				.css("margin-top", "5px")
	      				.css("margin-left","15px")
	      				.css("margin-right","15px")
	      				.append(
	      					$("<span>")
	      					.addClass("input-group-addon")
	      					.text(window.charList.substring(currentCount - 1, currentCount))
	      					.attr("name", "itemspan" + currentCount)
	      					
	      				)
	      				.append(
	      					$("<input>")
	      					.addClass("form-control")
	      					.attr("name", "option" + currentCount)
	      				)
	      				.append(
	      					$("<input>")
	      					.attr("type", "hidden")
	      		      		.attr("name", "itemspan" + currentCount)
	      		      		.val(window.charList.substring(currentCount - 1, currentCount))
	      				)
	      			)
	      		}
	      		
	      		function createMultipleChoiceQuestion() {
	      			var $divQuestionAera = $("#divQuestionAera");
	      			createOptionCountField($divQuestionAera);
	      			createQuestionContent($divQuestionAera);
	      			
	      			var $buttonAddOption = $("<button>")
	      				.attr("type", "button")
	      				.addClass("btn").addClass("btn-info")
	      				.text("添加选项")
	      				.css("margin-left","15px")
	      				.appendTo($("#divQuestionAera"));
	      			var $divOptions = $("<div>").appendTo($("#divQuestionAera"));
	      			$buttonAddOption.click(function() {
	      				var count = getOptionCount();
	      				if (count > 10) {
	      					alert("您已经添加了10个选项了，不能再添加了！")
	      					return false;
	      				}
	      				count = count + 1;
	      				createOptionItem($divOptions, count);
						setOptionCount(count);
	      				return false;
	      			});
	      		}
	      		
	      		function createEssayQuestion() {
	      			createQuestionContent($("#divQuestionAera"));
	      		}
	      		</script>

				
				<div class="form-group" style="margin-top:50px">
		    		<div class="col-xs-12">
		      			<div class="col-xs-6 text-right">
		     				 <button type="submit" id="btnaddquestion" class="btn btn-success">确认添加</button>
		     		    </div>
		      			<div class="col-xs-6 text-left">
		      				<button type="reset" class="btn btn-warning">重新填写</button>
		      			</div>	
		    		</div>
		    		
		    		<div class="col-xs-12" style="margin-top:50px">
		    		 <c:if test="${errorCode eq 0 }">
		          		<div class="alert alert-warning" role="alert" id="alert-warning">未选择类型！</div>
		        	</c:if>
		
		        	<c:if test="${errorCode eq 1 }">
		          		<div class="alert alert-warning" role="alert" id="alert-warning">题目未填写！</div>
		        	</c:if>  
		        	<c:if test="${errorCode eq 2 }">
		          		<div class="alert alert-warning" role="alert" id="alert-warning">选项未完全填写！</div>
		        	</c:if>  
		        	<c:if test="${errorCode eq 3 }">
		          		<div class="alert alert-warning" role="alert" id="alert-warning">添加成功！</div>
		        	</c:if>  
		        	<c:if test="${errorCode eq 4 }">
		          		<div class="alert alert-warning" role="alert" id="alert-warning">添加成功！</div>
		        	</c:if>  
		        	<c:if test="${errorCode eq 5 }">
		          		<div class="alert alert-warning" role="alert" id="alert-warning">未添加选项！</div>
		        	</c:if>  
		        	</div>
		  		</div>
		  		</form>
		  		</c:if>
	      	
	      	</c:if>
	      	
      </div>
      <div class="col-sm-3"></div>
     </div>

    </div>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="<%=request.getContextPath() %>/static/js/ie10-viewport-bug-workaround.js"></script>
	<script src="<%=request.getContextPath() %>/static/js/summernote.min.js" ></script>
	<script src="<%=request.getContextPath() %>/static/js/summernote-zh-CN.js" ></script>

  </body>
</html>